<template>
    <div>
        <header class="circle-header">
            <div :class="{'circle-header-item': true, 'circle-select': cur ==0}" @click="changeCircle(0)"><span>全部</span></div>
            <div :class="{'circle-header-item': true, 'circle-select': cur == 1}" @click="changeCircle(1)"><span>待发货</span></div>
            <div :class="{'circle-header-item': true, 'circle-select': cur == 2}" @click="changeCircle(2)"><span>待收货</span></div>
        </header>
        <circle-box :circleList="tempArr"></circle-box>
    </div>
</template>
<script>
    import circleBox from './order_box.vue'
    import { post } from '../../../../util/http.js'
    import { Toast } from 'mint-ui'
    export default {
        components: {
            circleBox
        },
        data() {
            return {
                selected: '',
                cur: 0,
                tempArr: [],
                pageNum: 1,
                haveAll: true,
                circleList: []
            }
        },
        mounted() {
            this.getOrderList(this.cur, this.pageNum)
            window.onscroll = function () {
                var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
                var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
                var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
                if (scrollT >= scrollH - clientH && this.haveAll) {
                    this.pageNum++
                    this.getOrderList(this.cur, this.pageNum)
                }
            }.bind(this)
        },
         methods: {
            changeCircle (index) {
                this.cur = index
                this.tempArr = []
                if(index == 1 || index == 2) {
                   this.circleList.forEach(item => {
                       if( item.status == index){
                            this.tempArr.push(item)
                       }
                    })
                    console.log( this.tempArr)
                } else {
                     this.tempArr = this.circleList
                }
            },
            getOrderList(type,page) {
                let info = JSON.parse(window.localStorage.getItem('dongHang_data'))
                post('http://dlsapi.rz158.com/order/orderList', {
                    agentId: info.agentId,
                    type:type,
                    page: page,
                    pageSize: 10
                }).then(res => {
                    if(res.code == 0) {
                        this.circleList = res.t 
                        this.tempArr = this.circleList
                        console.log(this.circleList)
                    } else {
                        Toast({
                            message: res.message,
                            duration: 1000
                        })
                    }
                })
            }
    }
}
</script>
<style lang="less" scoped>
        .circle-header {
            display: flex;
            font-size: 0.3rem;
            height: 0.7rem;
            box-sizing: border-box;
            padding: 0.21rem 0;
            .circle-header-item {
                flex: 1;
                text-align: center;
                color: #707070;
                font-size: 0.3rem;
                line-height: 0.3rem;
                border-right: 1px solid #707070;
                &:last-child {
                    border-right: none;
                }
                span {
                    display: inline-block;
                    height: 0.51rem;
                }
            }
            .circle-select {
                color: #29abae;
                span {
                    border-bottom: 3px solid #29abae;
                }
            }
        }
</style>

